<template>
  <div class="w-full">
    <div class="mb-5">
      <div class="p-5 bg-white rounded-[6px] mb-6">
        <div class="flex items-center">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: user_type == 2 || user_type == 3 || user_type == 5 ? `/teacherAssessList` : '/associationAssessList' }"
                                class="text-black/[0.45]">考核汇总
            </el-breadcrumb-item>
            <el-breadcrumb-item class="text-black/[0.45]">考核详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="assessment-card">
      <div class="assessment-header">
        <div class="left flex">
          <img :src="assessData.cover" alt="课程封面" class="cover-img">
          <div class="info">
            <div class="flex items-center">
              <div class="title flex1 flex">
                <span>{{ assessData.name }}</span>
                <div class="level">{{ assessData.level }}级</div>
              </div>
              <div class="flex">
                <el-button type="primary" @click="handleCardClick">开始考核</el-button>
              </div>
            </div>
            <div class="detail-rows">
              <div class="flex">
                <div class="detail-row flex">
                  <span>发布单位：{{ assessData.company }}</span>
                  <span>总分：{{ assessData.score }}</span>
                  <span>及格分值：{{ assessData.pass_score }} 分</span>
                  <span>建议时长：{{ assessData.duration }}分钟</span>
                  <!--                  <span>试卷参与率：{{ 90 }}</span>-->
                  <span>所属岗位：{{ assessData.job }}</span>
                </div>
              </div>
              <div class="detail-row">
                <span>试卷描述：{{ assessData.desc }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: calc(100% - 300px);">
      <div class="before:content-[' ']
            before:inline-block
            before:w-1 before:h-4
            rounded-[1px]
            before:bg-[#33A0FF] before:bg-gradient-to-b from-[#9DD1FF] to-[#33A0FF]
            before:mr-2 text-[18px] font-[500] leading-[26px] text-custom-text
            flex items-center mb-4">课程推荐
      </div>
      <div class="overflow-auto" style="height: calc(100% - 30px)">
        <courseCard :cardParams="{
        points: '',
        paper: assessData.id
      }"></courseCard>
      </div>
      
    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import CourseCard from "@/views/examCourses/components/courseCard.vue";
import { useRouter, useRoute } from "vue-router";
import { StorageUtil } from "@/utils/common.js";
import { computed } from "vue";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const {user_type} = userStore.userInfo || {}
const router = useRouter()
const route = useRoute()
const { id, name } = route.query
const assessData = computed(() => {
  return StorageUtil.session.get('assessData')
})
const handleCardClick = () => {
  router.push({
    path: '/examCourses/chapter',
    query: {
      itemId: assessData.value.id,
      name: assessData.value.name,
      jobId: id,
      jobName: name
    }
  })
}
</script>
<style scoped lang="scss">
.assessment-card {
  background: #FFFFFF;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;

  .assessment-header {
    display: flex;
    justify-content: space-between;

    .left {
      width: 100%;
      justify-content: space-between;

      .cover-img {
        width: 180px;
        height: 142px;
        border-radius: 4px;
        margin-right: 20px;
      }

      .info {
        flex: 1;

        .countdown {
          margin-right: 16px !important;

          span {
            padding: 0 10px;
            line-height: 30px;
          }

          img {
            width: 16px;
            height: 16px;
            margin-top: 7px;
          }

          .time {
            background: #F5F5F5;
            padding: 2px 8px;
            margin: 0 4px;
            border-radius: 2px;
            color: #1890FF;
          }
        }

        .title {
          font-size: 20px;
          font-weight: 500;
          align-items: center;

          .level {
            width: 36px;
            height: 22px;
            background-color: #FFF4F4;
            text-align: center;
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 12px;
            margin-top: 5px;
            color: #FC474C;
            margin-left: 10px;
            line-height: 22px;
          }

          .progress-img {
            margin-left: 10px;
            width: 36px;
            height: 22px;
            margin-top: 5px;
          }

          .tag {
            background: #FF4D4F;
            color: #fff;
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            margin-left: 8px;
          }
        }

        .detail-rows {
          margin-top: 16px;
          background-color: #F5F5F5;
          padding: 16px;
          border-radius: 6px 6px 6px 6px;
        }

        .detail-row {
          color: rgba(0, 0, 0, 0.65);
          margin-bottom: 8px;
          font-size: 14px;

          span+span {
            margin-left: 24px;
          }
        }
      }
    }


  }


}
:deep(.el-breadcrumb__inner.is-link) {
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #33A0FF;
  font-weight: 500;
}
</style>